<template>
<van-popup v-model="showTradeRecordPanel" class="trade-record-panel" position="right" :overlay="false" :class="{'isScoll': showDateFilter==false&&showConditionFilter==false}">
  <van-nav-bar :title="title" left-arrow @click-left="closeTradeRecordPanel" right-text="筛选" left-text="返回" @click-right="openConditionFilter"></van-nav-bar>
  <div class="van-cell-group van-hairline--top-bottom" @click="openDateFilterPanel">
    <div class="van-cell van-hairline">
      <div class="van-cell__title">
        <span class="van-cell__text">{{ date| formatDate }}</span>
        <span class="van-cell__label">支出7123币 收入10000币</span>
      </div>
      <i class="van-icon van-cell__right-icon van-icon-description"></i>
    </div>
  </div>
  <!-- 转赠记录列表 -->
  <div class="van-cell-group van-hairline--top-bottom" >
    <div class="van-cell van-hairline" v-for="i in 20">
      <div class="van-cell__title">
        <i class="van-icon van-icon-gold-coin"> </i>
         <span class="van-cell__text">转赠-给罗总</span>
         <span class="van-cell__label">2月27 08:23</span>
       </div>
      <div class="van-cell__value"><span>-3000币</span></div>
    </div>
  </div>
  <!-- 日期过滤面板 -->
  <van-popup v-model="showDateFilter" position="bottom" :overlay="true">
    <van-datetime-picker v-model="currentDate" type="date" :min-hour="minHour" :max-hour="maxHour" :min-date="minDate" @confirm="getDate" @cancel="closeDateFilterPanel" />
  </van-popup>
  <!-- 条件筛选面板 -->
  <van-popup v-model="showConditionFilter" position="bottom" :overlay="true" class="condition">
    <h5 class="condition-hd">选择交易类型</h5>
    <div class="condition-bd">
      <div class="van-row row1">
        <div class="van-col  van-col-8" @click="trade(0)" :class="{'active': title=='交易记录'}">全部</div>
        <div class="van-col van-col-7 van-col-offset-1" @click="trade(1)" :class="{'active': title=='收入'}">收入</div>
        <div class="van-col van-col-7 van-col-offset-1" @click="trade(2)" :class="{'active': title=='转赠'}">转赠</div>
      </div>
      <div class="van-row">
        <div class="van-col van-col-8" @click="trade(3)" :class="{'active': title=='消费'}">消费</div>
        <div class="van-col van-col-7 van-col-offset-1" @click="trade(4)" :class="{'active': title=='退款'}">退款</div>
        <div class="van-col van-col-7 van-col-offset-1" @click="trade(5)" :class="{'active': title=='提现'}">提现</div>
      </div>
    </div>
    <div class="condition-ft" @click="closeConditionFilter">
      取消
    </div>
  </van-popup>
</van-popup>
</template>
<script>
export default {
  props: ['showTradeRecordPanel'],
  data() {
    return {
      date: new Date(),
      showDateFilter: false, //是否显示日期面板
      showConditionFilter: false, // 是否显示条件筛选面板
      currentDate: new Date(2018, 1, 28),
      minHour: 10,
      maxHour: 20,
      title: '交易记录',
      minDate: new Date()
    }
  },
  methods: {
    closeTradeRecordPanel() {
      this.title = '交易记录';
      this.$emit('closeTradeRecordPanel');
    },
    // 显示日期过滤面板
    openDateFilterPanel() {
      this.showDateFilter = true
    },
    getDate(v) {
      this.date = v;
      this.showDateFilter = false
      // 重新加载loading 再加载一次转赠记录数据
    },
    // 关闭日期过滤面板
    closeDateFilterPanel() {
      this.showDateFilter = false
    },
    // 显示条件筛选面板
    openConditionFilter() {
      this.showConditionFilter = true
    },
    // 关闭条件筛选面板
    closeConditionFilter() {
      this.showConditionFilter = false
    },
    // 按照交易类型查询
    trade(type) {
      switch (type) {
        case 0:
          this.title = '交易记录';
          this.showConditionFilter = false;
          break;
        case 1:
          this.title = '收入';
          this.showConditionFilter = false;
          break;
        case 2:
          this.title = '转赠';
          this.showConditionFilter = false;
          break;
        case 3:
          this.title = '消费';
          this.showConditionFilter = false;
          break;
        case 4:
          this.title = '退款';
          this.showConditionFilter = false;
          break;
        case 5:
          this.title = '提现';
          this.showConditionFilter = false;
          break;
        default:
          this.title = '交易记录';
          this.showConditionFilter = false;
      }
    }
  }
}
</script>

<style lang="scss">
@import '../../assets/styles/common.scss';
.trade-record-panel {
    width: 100%;
    height: 100%;
    background-color: #f2f2f2;
    &.isScoll{
      overflow-y: scroll;
    }
    .van-cell__value,
    .van-icon {
        color: #999127;
    }
    .condition {
        &-hd {
            height: px2rem(60px);
            line-height: px2rem(60px);
            text-align: center;
            border-bottom: 1px solid #f2f2f2;
            font-weight: bolder;
        }
        &-bd {
            padding: px2rem(20px);
            box-sizing: border-box;
            background-color: #f3f3f3;
            .van-col {
                height: px2rem(80px);
                line-height: px2rem(80px);
                text-align: center;
                background-color: #fff;
                &.active {
                    color: #fff;
                    background-color: #3b7933;
                }
            }
            .row1 {
                margin-bottom: px2rem(20px);
            }
        }
        &-ft {
            border-top: px2rem(10px) solid #e4e4e4;
            height: px2rem(80px);
            line-height: px2rem(80px);
            text-align: center;
            font-weight: bolder;
        }
    }
}
</style>
